<!-- 商品发布 - 虚拟商品设置 -->
<template>
  <el-alert v-if="!isDetail && !props.propFormData?.virtualProduct" style="margin-bottom:12px;" title="非虚拟商品不需要设置" type="warning" />
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail || !props.propFormData?.virtualProduct">
    <el-form-item label="充值类型" prop="rechargeType">
      <el-select placeholder="请选择充值类型" v-model="formData.rechargeType" class="w-80">
        <el-option
          v-for="item in RechargeTypeOptionList"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="充值方式" prop="rechargeMethod">
      <el-select placeholder="请选择充值方式" v-model="formData.rechargeMethod" class="w-80">
        <el-option
          v-for="item in RechargeMethodTypeOptionList"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="发货方式" prop="deliveryMethod">
      <el-select placeholder="请选择发货方式" v-model="formData.deliveryMethod" class="w-80">
        <el-option
          v-for="item in DeliveryMethodTypeOptionList"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="是否自定义面额" prop="customDenomination">
      <el-radio-group
        v-model="formData.customDenomination"
        class="w-80"
      >
        <el-radio :label="false">否</el-radio>
        <el-radio :label="true" class="radio">是</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="formData.customDenomination" label="最小自定义面额" prop="minCustomDenomination">
      <el-input-number
        v-model="formData.minCustomDenomination"
        :min="0"
        placeholder="请输入最小自定义面额"
        class="w-80!"
      />
    </el-form-item>
    <el-form-item v-if="formData.customDenomination" label="最大自定义面额" prop="maxCustomDenomination">
      <el-input-number
        v-model="formData.maxCustomDenomination"
        :min="0"
        placeholder="请输入最大自定义面额"
        class="w-80!"
      />
    </el-form-item>
    <el-form-item label="用户自定义输入框" prop="customUserInput">
      <el-checkbox-group v-model="formData.customUserInput" class="w-80">
        <el-checkbox
          v-for="dict in UserCustomInputOptionList"
          :key="dict.value"
          :label="dict.value"
        >
          {{ dict.text }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import type { Spu } from '@/api/mall/product/spu'
import { PropType } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { copyValueToTarget } from '@/utils'
import {
  DeliveryMethodTypeOptionList,
  EnumDeliveryMethodType,
  EnumRechargeMethodType,
  EnumRechargeType,
  EnumUserCustomInputType,
  RechargeMethodTypeOptionList,
  RechargeTypeOptionList,
  UserCustomInputOptionList
} from "@/config/spu";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";

defineOptions({ name: 'ProductVirtualProductForm' })

const message = useMessage() // 消息弹窗

const props = defineProps({
  propFormData: {
    type: Object as PropType<Spu>,
    default: () => {}
  },
  isDetail: propTypes.bool.def(false), // 是否作为详情组件
})

const formRef = ref() // 表单Ref
const getRelativeVarList = ()=> {
  return [
    "rechargeType",
    "rechargeMethod",
    "deliveryMethod",
    "customDenomination",
    "minCustomDenomination",
    "maxCustomDenomination",
    "customUserInput",
  ]
}
// 表单数据
const formData = ref<Spu>({
  rechargeType: EnumRechargeType.GIFT_CARD, // 充值类型
  rechargeMethod: EnumRechargeMethodType.CARD_CODE, // 充值方式
  deliveryMethod: EnumDeliveryMethodType.AUTOMATIC, // 发货方式
  customDenomination: false, // 是否自定义面额
  minCustomDenomination: 0, // 最小自定义面额
  maxCustomDenomination: 0, // 最大自定义面额
  customUserInput: [EnumUserCustomInputType.RECEIVE_EMAIL], // 用户自定义输入
})
// 表单规则
const rules = reactive({
  rechargeType: [required],
  rechargeMethod: [required],
  deliveryMethod: [required],
  customDenomination: [required],
  customUserInput: [required],
})

/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData.value, data)
  },
  {
    immediate: true
  }
)

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
  if (!formRef) return

  if(!props.propFormData?.virtualProduct) {
    return;
  }

  try {
    await unref(formRef)?.validate()
    // 校验通过更新数据
    Object.assign(props.propFormData, formData.value)
  } catch (e) {
    message.error('【其它设置】不完善，请填写相关信息')
    emit('update:activeName', 'other')
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate, getRelativeVarList })
</script>
